<template>
    <div class="many-person-wrap">
        <el-input @focus='singlePop' v-model='personVal' class='praent-cont' placeholder="点击选择"></el-input>
        <el-dialog v-dialog-drag :visible="popshade" title="选择人员" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="personSgCanceClick">
            <!--员工选择弹窗(多选)-->
            <div class="personmlDialog" v-if="popshade">
                <div class="psg-body">
                    <div class="deptmultiple clearfix">
                        <div class="seldept">
                            <h4>可选用户</h4>
                            <el-form class="bgfff">
                                <el-row>
                                    <el-col :span ="12" class="staffSg-wrap">
                                        <el-input @focus="focusFun" placeholder="选择机构" v-model="personSgText"></el-input>
                                        <i class="fa fa-times close-tree" @click="isClearBtn"></i>
                                    </el-col>
                                    <el-col :span ="12" style="padding-left:5px;">
                                        <el-input  placeholder="输入用户姓名" v-model="filterText"> </el-input>
                                    </el-col>
                                </el-row>
                                <el-form-item class="staffSg-wrap">
                                    <el-tree v-if="isShowStaffTree" 
                                        class="filter-tree" 
                                        @node-click="personSgClick" 
                                        :data="deptData" 
                                        :props="defaultProps" 
                                        default-expand-all  
                                        ref="tree2" 
                                        :filter-node-method="filterNode" 
                                        highlight-current>
                                    </el-tree>
                                    <ul class="staffSg-list" v-else>
                                        <li v-for="(item,index) in personsgli" @click="personSgLiClick(item)" :key="'a'+index">{{item.username + '(' + item.employeeNo + ')' }}</li>
                                        <span v-if='personsgli.length <=0' class='stop_NO'>暂无数据</span>
                                    </ul>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="seleddept">
                            <h4>已选用户</h4>
                            <ul class="staffSg-list" style="height:245px;">
                                <li v-for="(item,idx) in fpRList" :key="'fpRList'+idx">{{item.name}}
                                    <i class="el-icon-close" @click="delstaff(idx)"></i>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="personSgCanceClick">取 消</el-button>
                <el-button type="primary" @click="personSgSureClick">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import bus from "@/components/common/js/bus";
import { isArray, transformTozTreeFormat } from '@/utils/Tools';
import { initDeptTree, getStaffById , getUserBaseList } from "@/service/core/deptConf";
export default {
    props: {
        popInfo: {},
        personArr: { // 反显
            type: Array,
            default() {
                return []
            }
        },
    },
    data() {
        return {
            token          : this.$store.state.token.token,
            deptId         : this.$store.state.token.deptId,
            deptName       : this.$store.state.token.deptName,
            deptData       : [],
            filterText     : '',
            isShowStaffTree: false,
            personsgli     : [],
            infopersonsgli : [],
            filterNum      : [],
            popshade       : false,
            personSgText   : "",
            resStr         : "",
            fpRList        : [],
            sonname        : "",
            sonid          : "",
            defaultProps: {
                children: "children",
                label: "name"
            },
            personVal: "",
        };
    },
    watch: {
        popInfo(val) {
            this.singlePop();
            this.popshade = val;
            if(val){ 
                this.fpRList.splice(0, this.fpRList.length);
                this.initgetStaffById();
                this.personSgText = this.deptName;
            }
        },
        personArr(val) { // 反显
            if(val.length > 0) {
                val.forEach(item => {
                    this.fpRList = val.map(item => {
                        return {
                            id: item.id,
                            name: item.name,
                        }
                    })
                });
                this.personVal = val.map(v => v.name).join(',');
            }else {
                this.fpRList = [];
                this.personVal = '';
            }
        },
        personSgText(val) {//业务组模糊查询
            if(this.$refs.tree2){ 
                this.$refs.tree2.filter(val);
            }
		},
    },
    mounted() {
        this.$nextTick(() => {
            $(document).on('click','.el-dialog__body',(e) => { 
                this.isShowStaffTree       = false;
                if(this.personSgText || this.filterText ){ 
                    this.initgetStaffById();
                } else{ 
                    this.personsgli = [];
                }
            }) 
            $('body').on('click','.seldept',(e)=> {  //阻止冒泡
                event.stopPropagation();   
            })   
        })  
    },
    methods: {
        filterNode(value, data) { 
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},
        initgetStaffById(){//机构下的人
            let params = {
                deptId : this.deptId,
                status :'ACTIVE',
                columns: 'employeeNo', 
                orders : 'ASC',
                usernameLk: this.filterText,
            }
            this.personsgli = [];
            getUserBaseList(params).then(response => {
                if (response.data.data) {
                    response.data.data.forEach((item, index) => {
                        if ((item.userStatusId == "LOCK" || item.userStatusId == "ACTIVE")) {
                            this.personsgli.push(item);
                        }
                    });
                    this.isShowStaffTree = false;
                }
            });
        },
        clearTreePop() {
            this.personVal = "";
        },
        focusFun() {
            this.isShowStaffTree = true;
            this.personSgText    = null;
            this.deptTree();
        },
        singlePop() {
            this.personsgli = [];
            this.personSgText = "";
            this.popshade = true;
        },
        personSgClick(val, data, self) {
            this.deptId = val.id;
            this.resStr          = "";
            this.getDeptParents(data);
            this.personSgText    = this.resStr;
            this.initgetStaffById()
            this.isShowStaffTree = false;
        },
        deptTree() {
            //初始化机构树(单选)
            var _this = this;
            var qs = require("qs");
            _this.deptData = [];
            let params = { token: _this.token, statusId: "ACTIVE" , columns: 'path,orderNum', orders: 'true,true' };
            initDeptTree(params).then(response => {
                if (response.data.code == 1000) {
                    var data = response.data.data;
                    data = data.filter(v => v.statusId == 'ACTIVE');
                    let nodes = transformTozTreeFormat(data); // 组装成嵌套结构的数据
                    this.deptData.push(...nodes);
                }
            });
        },
        getDeptParents(data) {
            this.resStr = this.resStr.length === 0 ? data.data.name : data.data.name + " -> " + this.resStr;
            if (data.parent.parent != null) this.getDeptParents(data.parent);
        },
        personSgLiClick(data) {
            var flag = true;
            this.fpRList.forEach(item => {
                if (data.id == item.id) {
                    flag = false;
                }
            });
            if (flag == true) {
                this.fpRList.push({
                    id        : data.id,
                    name      : data.username + '(' + data.employeeNo + ')',
                    employeeNo: data.employeeNo,
                    dutyName  : data.dutyName,
                    deptName  : data.deptName
                });
            }
        },
        delstaff(index) {
            this.fpRList.splice(index, 1);
        },
        personSgCanceClick() {
            this.deptId     = this.$store.state.token.deptId;
            this.popshade   = false;
            this.filterText = "";
            this.fpRList    = [];
            this.$emit("update:popInfo", false);
        },
        personSgSureClick() { // 点击确定按钮
            this.fpRList.forEach(item => {
                this.sonname += item.name + ",";
                this.sonid += item.id + ",";
                this.personVal += item.name + ",";
            });
            this.personVal = this.fpRList.map(v => v.name).join(',')
            if (this.sonname != "") {
                this.sonname = this.sonname.substring(
                    0,
                    this.sonname.length - 1
                );
            }
            if (this.sonid != "") {
                this.sonid = this.sonid.substring(0, this.sonid.length - 1);
            }
            this.popshade = false;
            this.$emit("update:popInfo", false);
            bus.$emit("manyPersFun", this.fpRList);
            this.$emit("manyPersFun", this.fpRList);
        },
        isClearBtn(){ 
            this.deptId = null;   //清空机构id
            this.personSgText = null;
            //this.personsgli   = [];
            this.initgetStaffById();
        }
    }
};
</script>
<style lang="scss" scoped>
.many-person-wrap{
    /deep/ .el-form-item__content .el-tree {
        height: 210px;
        overflow: auto;
    }
    .close-tree {
        position: absolute;
        right: 6px;
        top: 10px;
        cursor: pointer;
    }
    .praent-cont {
        position: relative;
    }
    .child-comnt {
        position: absolute;
        top: 10px;
        right: 6px;
        cursor: pointer;
    }
    .input-wrap{
        /deep/ .el-input__inner{
            height: 28px;
            line-height: 28px;
        }
    }
    .staffSg-list { 
        height: 200px;
        overflow: auto;
        li { 
            height: 28px;
            line-height: 28px;
            padding-left: 15px;
            &:hover{ 
                background: #eeeeee;
            }
            i{
                float: right;
                margin: 7px 10px 0 0;
            }
        }
    }
    .stop_NO{ 
        width: 100%;
        display: inline-block;
        text-align: center;
    }
    .seldept{
        width: 50%;
        float: left;
        margin-right: 10px;
        > h4 {
            line-height: 22px;
        }
    }
    .seleddept{
        overflow: hidden;
        > h4 {
            line-height: 22px;
        }
    }
} 

</style>
